<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
    <style>
      .chart-container {
        background-color: rgba(128, 128, 128, 0.5);
      }
    </style>
  </head>
  <body>
    <!-- 
      1. 准备canvasDOM元素
      2. 设置宽度和高度
     -->
    <canvas class="chart-container" width="800" height="400"></canvas>
    <script>
      // 3. 获取canvasDOM元素
      const canvas = document.querySelector(".chart-container");
      // 4. 通过canvas元素获取画笔
      // const context = canvas.getContext("2d");
      const ctx = canvas.getContext("2d");
      // 5. 绘画
      ctx.beginPath();
      // 画线
      console.log(ctx);
      ctx.moveTo(100, 100);
      ctx.lineTo(200, 200);
      ctx.lineTo(300, 100);
      ctx.lineTo(100, 100);
      ctx.strokeStyle = "green";
      ctx.stroke(); // 闭合
      ctx.closePath();

      // 画圆
      ctx.beginPath();
      ctx.arc(400, 250, 50, 0, 2 * Math.PI, false);
      // ctx.stroke(); // 闭合
      ctx.fillStyle = "pink";
      ctx.fill(); // 填充
      ctx.closePath();

      // 画矩形
      ctx.beginPath();
      // ctx.fillRect()
      ctx.strokeStyle = "yellow";
      ctx.strokeRect(450, 100, 100, 100);
      ctx.closePath();

      // 画文字
      ctx.fillStyle = "green";
      ctx.font = "20px 宋体";
      ctx.fillText("画画的贝贝", 750, 100);
    </script>
  </body>
</html>
